@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
.web{ 
    position: relative;
    width:100%;
    height:100%;
    /**/
    overflow: hidden;
    >header{
        height:r(197);
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        >label{
            margin-left:r(48);
            // margin-bottom:50px;
            >span{
                width:33px;
                height:3px;
                display:block;
                background:#000;
                margin-top:7px;
               
            }
        }
        >.logo{
            width:150px;
            transition: width .5s ease-in-out;
            >img{
                width:100%;
            }
        }
        >label{
            display: inline-block;
            margin-right:r(48);
            // margin-bottom:35px;
        }
    }//header
    >.content{
        width:100%;
        margin: 0 auto;     
        padding-right: 30px; 
        position: absolute;
        left:0;
        bottom:0;
        top:r(197);
        // overflow: auto;
        right: -30px;
        overflow-x: hidden;
	    overflow-y: scroll;
        >.banner{
            width:r(1477);
            margin: 0 auto;
            overflow: hidden;
            >.img_box{
                // display: flex;
                // display: -webkit-flex;
                >.banner_img{
                    // position: relative;
                    width:100%;
                    // margin:0 auto;
                    >img{
                        width:100%;
                    }
                    >.b_uttom{
                        position: absolute;
                        left:50%;
                        transform:translateX(-50%);
                        bottom:r(200);
                        font-size: 18px;
                        color:#fff;
                        font-family: 微软雅黑;
                        padding:r(13) r(68);
                        border:1px #fff solid;
                    }    
                }
            }
         
        }//banner
        >.about_box{
            width:r(915);
            margin:0 auto;
            // margin-top:r(130);
            >h1{
                text-align: center;
                width:100%;
                font-size:40px;
            }
            >p{
                margin-top:r(50);
                width:100%;
                font-size:20px;
                line-height: r(45);
                text-align: left;
            }
            >.imga{
                display: block;
                margin-top:r(80);
                margin-bottom:r(20);
                width:100%;
                >img{
                    width:100%;
                }
            }
            >.imga_box{
                display:flex;
                display:-webkit-flex;
                justify-content: flex-end;
                >a{
                    display: block;
                    margin-left:r(20);
                    width:r(315);
                    >img{
                        width:100%;
                    }
                }
            }
            >.title2{
                margin-top:r(97);
                text-align: left;
                width:100%;
                font-size:40px;
            }
            >.imgb_box{
                display:flex;
                display: -webkit-flex;
                justify-content: space-between;
                >a{
                    display: block;
                    width:r(582);
                    >img{
                        width:100%;
                    }
                }
                >aside{
                    width:r(313);
                    >a{
                        display: block;
                        margin-bottom:r(20);
                        >img{
                            width:100%;
                        }
                    }
                   
                }
            }
            >.title3{
                margin-top:r(96);
                margin-bottom: r(60);
                text-align: right;
            }
            >.t_right{
                // text-align: right;
                margin-bottom: r(258);
            }
        }//about_box
     
  
        >.bg_img{
           
            position: relative;
            width:r(1920);
            >img{
                width:100%;
            }
            >footer{
                width:100%;
                display:flex;
                display:-webkit-flex;
                justify-content: space-around;
                align-items: center;
                background:rgba($color: #000000, $alpha: .5);
                position: absolute;
                bottom:0;
                padding-top:45px;
                padding-bottom:45px;
                >p{
                    font-size:11px;
                    color:#fff;
                }
                >div{
                    display: flex;
                    display:-webkit-flex;
                    >input{
                        display: none;
                    }
                    #jiantou_a:checked ~label{
                        transform: rotateZ(-90deg);
                    }
                   
                        >ul{
                            display: flex;
                            display:-webkit-flex;
                            display: none;
                            >li{
                                width:r(40);
                                >img{
                                    width:100%;
                                }
                            }
                            
                        }
                    >label{
                        >span{
                            display: block;
                            width:r(35);
                            >img{
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
    }//content
    .content::-webkit-scrollbar {display:none}
}//web
@media only screen and (min-width: 768px) {
    .web{ 
      
        >header{
        }//header
        >.content{
            >.about_box{
                >.imga{
                    display: block;
                    width:100%;
                    height: r(415);
                    overflow: hidden;
                    >img{
                        width:100%;
                        transition: transform .5s ease-in-out;
                    }
                    >img:hover{
                        transform: scale(1.1);
                        width:100%;
                    }
                }
                >.imga_box{
                    >a{
                        display: block;
                        width:r(315);
                        height: r(219);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                >.title2{
                }
                >.imgb_box{
                    display:flex;
                    display: -webkit-flex;
                    justify-content: space-between;
                    >a{
                        display: block;
                        width:r(582);
                        height: r(649);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                    >aside{
                        width:r(313);
                        >a{
                            display: block;
                            margin-bottom:r(20);
                            height: r(219);
                            overflow: hidden;
                            >img{
                                width:100%;
                                transition: transform .5s ease-in-out;
                            }
                            >img:hover{
                                transform: scale(1.1);
                            }
                        }
                       
                    }
                }
            }//about_box
        }//content
    }//web
}
@media only screen and (max-width: 768px) {
    .web{ 
    >header{
        height:50px;
        >.left{
            width:r(100);
            margin-left:r(48);
            >span{
                width:100%;
                height:3px;
                display:block;
                background:#000;
                margin-top:5px;         
            }
        }
        >.logo{
            width:r(150);
            >img{
                width:100%;
            }
        }
        >.right{  
            width:r(100);  
            margin-right:r(48);
            // margin-bottom:35px;
            >img{
                width:100%;
            }
        }
    }//header
    >.content{
        width:100%;
        margin: 0 auto;  
        height:auto;
        // padding-top:r(197);    
        position: absolute;
        left:0;
        right: 0px;
        bottom:0;
        top:r(197);
        padding-right:0;
        >.about_box{
            width:90%;
            margin-top:r(100);
            >h1{
                width:100%;
                font-size:30px;
            }
            >p{
                margin-top:r(50);
                width:100%;
                font-size:12px;
                line-height: 24px;
            }
            >.imga{
                display: block;
                margin-top:r(80);
                margin-bottom:r(20);
                width:100%;
                >img{
                    width:100%;
                }
            }
            >.imga_box{
                display:flex;
                justify-content: space-between;
                display:-webkit-flex;
                // justify-content: flex-end;
                >a{
                    margin:0;
                    display: block;
                    width:49%;
                    >img{
                        width:100%;
                    }
                }
            }
            >.title2{
                margin-top:r(97);
                text-align: left;
                width:100%;
                font-size:40px;
            }
            >.imgb_box{
                display:flex;
                display: -webkit-flex;
                justify-content: space-between;
                flex-wrap: wrap;
                >a{
                    display: block;
                    width:100%;
                    >img{
                        width:100%;
                    }
                }
                >aside{
                   width:100%;
                   display: flex;
                   display: -webkit-flex;
                   justify-content: space-between;
                    >a{
                        margin:0;
                        margin-top:r(20);
                        display: block;
                        width:49%;
                        >img{
                            width:100%;
                        }
                    }
                   
                }
            }
    
        }//about_box
     
  
        >.bg_img{
           
            position: relative;
            width:100%;
            >img{
                width:100%;
            }
            >footer{
                width:100%;
                padding-top:20px;
                padding-bottom:20px;
                >p{
   
                }
                >div{
               
                    >input{
                        display: none;
                    }
                    #jiantou_a:checked ~label{
                        transform: rotateZ(-90deg);
                    }
                   
                        >ul{
                            display: flex;
                            display:-webkit-flex;
                            display: none;
                            >li{
                                width:r(60);
                                >img{
                                    width:100%;
                                }
                            }
                            
                        }
                    >label{
                        >span{
                            display: block;
                            width:r(35);
                            >img{
                                width:100%;
                            }
                        }
                    }
                }
            }//footer
        }
    }//content
    .content::-webkit-scrollbar {display:none}
}//web
}